<template>

  <el-main style="height: 930px;">

    <div style="margin: 10px 0">
      <el-button type="primary" @click="addOutBill">新增<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-date-picker
        v-model="selectDate"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <template>
        <el-select v-model="selectStage" placeholder="请选择状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>


    <div>
      <el-table
        :data="outTableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="调拨单号" width="120"></el-table-column>
        <el-table-column prop="warehouseName" label="目的库房名称" width="120"></el-table-column>
        <el-table-column prop="missionID" label="任务单" width="120"></el-table-column>
        <el-table-column prop="stage" label="状态" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.stage == 'PRE_IN'">调拨入库</span>
            <span v-if="scope.row.stage == 'PRE_OUT'">调拨出库</span>
            <span v-if="scope.row.stage == 'HAD_IN'">已入库</span>
            <span v-if="scope.row.stage == 'HAD_OUT'">已出库</span>
            <span v-if="scope.row.stage == 'RECEIVED'">配送员已收货</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="200"></el-table-column>
        <el-table-column label="操作"   align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="chosenOutBillShow(scope.$index, scope.row)">查看商品详情<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="green"
              title="您确定进行操作吗吗？"
              @confirm="operate(scope.row)"
            >
              <el-button type="success" slot="reference">操作 <i class="el-icon-edit"></i></el-button>
            </el-popconfirm>
            <el-button type="success" @click="chosenOutBillEdit(scope.$index,scope.row)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="delOutBill(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="outTotal">
      </el-pagination>
    </div>

    <el-dialog title="新增调拨单" :visible.sync="createOutDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="库房名称">
          <el-input v-model="createOutDialog.warehouseName" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="任务号">
          <el-input v-model="createOutDialog.missionID" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="createOutDialog.stage" placeholder="请选择状态" style="width: 300px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" >
          <el-date-picker
            v-model="createOutDialog.date"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 300px"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createOutDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="carDesDialogShow">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑调拨单" :visible.sync="editOutDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="目的库房名称">
          <el-input v-model="editOutDialog.warehouseName" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="任务号">
          <el-input v-model="editOutDialog.missionID" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editOutDialog.stage" placeholder="请选择状态" style="width: 300px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" >
          <el-date-picker
            v-model="editOutDialog.date"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 300px"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editOutDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="nextEdit">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="操作" :visible.sync="operateDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="目的状态">
          <el-input v-model="operateDialog.stage" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="nextOperate">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增商品详情" :visible.sync="addCargoDescriptionDialogVisible">
      <el-table :data="createCargoTableData">
        <el-table-column property="cargoName" label="商品名称" width="200"></el-table-column>
        <el-table-column property="planQuantities" label="计划出入库数量"></el-table-column>
        <el-table-column property="realQuantities" label="计划出入库数量"></el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope1">
            <el-button type="success" @click="editAddCarDesShow(scope1.$index)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="delCreateCargoDes(scope1.row.cargoName)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCargoDescriptionDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="createCarDialogShow">新增</el-button>
        <el-button type="primary" @click="finish">完成</el-button>
      </div>
    </el-dialog>

    <el-dialog title="展示商品详情" :visible.sync="showCargoDescriptionDialogVisible">
      <el-table :data="showCargoTableData">
        <el-table-column property="id" label="商品代码" width="140"></el-table-column>
        <el-table-column property="cargoName" label="商品名称" width="140"></el-table-column>
        <el-table-column property="unit" label="计量单位" width="140"></el-table-column>
        <el-table-column property="planQuantities" label="计划出入库数量" width="140"></el-table-column>
        <el-table-column property="realQuantities" label="实际出入库数量" width="140"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="编辑商品详情" :visible.sync="editCargoDescriptionDialogVisible">
      <el-table :data="editCargoTableData">
        <el-table-column property="id" label="商品代码" width="90"></el-table-column>
        <el-table-column property="cargoName" label="商品名称" width="100"></el-table-column>
        <el-table-column property="unit" label="计量单位" width="95"></el-table-column>
        <el-table-column property="planQuantities" label="计划出入库数量" width="120"></el-table-column>
        <el-table-column property="realQuantities" label="实际出入库数量" width="120"></el-table-column>
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope1">
            <el-button type="success" @click="editEditCarDesShow(scope1.$index)">编辑<i class="el-icon-edit"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="delEditCargoDes(scope1.row.cargoName)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCargoDescriptionDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="editCarDialogShow">新增</el-button>
        <el-button type="primary" @click="editCargoDes">完成</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增出库商品表格" :visible.sync="createCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划商品数量">
          <el-input v-model="createCargoDialog.planQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实际商品数量">
          <el-input v-model="createCargoDialog.realQuantities"   autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createCargoDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="addCargoDes">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑新增表格商品" :visible.sync="editAddCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划商品数量">
          <el-input v-model="createCargoDialog.planQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实际商品数量">
          <el-input v-model="createCargoDialog.realQuantities"  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editAddCargoDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="addEditCargoDes()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增编辑表格商品" :visible.sync="createEditCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划商品数量">
          <el-input v-model="createCargoDialog.planQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实际商品数量">
          <el-input v-model="createCargoDialog.realQuantities" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createCargoDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="createEditCargoDes">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑编辑表格商品" :visible.sync="editEditCargoDialogVisible" width="30%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="createCargoDialog.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划商品数量">
          <el-input v-model="createCargoDialog.planQuantities" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实际商品数量">
          <el-input v-model="createCargoDialog.realQuantities" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editOutDialogVisible = false">上一步</el-button>
        <el-button type="primary" @click="editEditCargoDes()">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>

</template>

<script>
import axios from "axios";
export default{
  name: 'OutWarehouse',
  data(){
    return {
      options: [
        {
          value: '',
          label: '全部'
        },
        {
        value: 'PRE_IN',
        label: '调拨入库'
      }, {
        value: 'PRE_OUT',
        label: '调拨出库'
      },{
        value: 'HAD_IN',
        label: '已入库'
      },{
        value: 'HAD_OUT',
        label: '已出库'
      },{
        value: 'RECEIVED',
        label: '配送员已收货'
      },],
      options1: [
        {
          value: 'PRE_IN',
          label: '调拨入库'
        }, {
          value: 'PRE_OUT',
          label: '调拨出库'
        }],
      outTableData: [],
      createCargoTableData: [],
      showCargoTableData:[],
      editCargoTableData:[],
      outTotal: 0,
      pageNum: 1,
      pageSize: 10,
      selectDate:["",""],
      selectStage:"",
      createOutDialog: {},
      createCargoDialog:{},
      editOutDialog:{},
      operateDialog:{},
      loading:false,
      createOutDialogVisible: false,
      addCargoDescriptionDialogVisible:false,
      editCargoDescriptionDialogVisible:false,
      showCargoDescriptionDialogVisible:false,
      createEditCargoDialogVisible:false,
      operateDialogVisible:false,
      editAddCargoDialogVisible:false,
      createCargoDialogVisible:false,
      editEditCargoDialogVisible:false,
      editOutDialogVisible:false,
      multipleSelection: [],
      planQuantities:"",
      realQuantities:"",
      editAddChosenIndex:"",
      editEditChosenIndex:"",
      editCargoName:"",
      tempRow:"",
      resData:{}
    }
  },
  created() {
    this.load()
  },
  methods: {

    load() {        ////搜索，加载最外层表格函数
      axios.post("http://127.0.0.1:8080/test/depBill/getAllDepPage", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        from: this.selectDate[0],
        to: this.selectDate[1],
        stage: this.selectStage
      }).then(res => {
        console.log(res);
        this.outTableData = res.data.data.list;
        this.resData = res.data;
        this.outTotal = res.data.data.total;
      })
    },

    reset() {      ////重置最外层表格函数
      this.selectDate[0] = ""
      this.selectDate[1] = ""
      this.selectStage = ""
      this.load()
    },

    chosenOutBillShow(index, row){         ////最外层表格显示商品详情的按钮
      this.showCargoTableData = this.resData.data.list[index].list;
      this.showCargoDescriptionDialogVisible = true;
    },

    operate(row){
      if(row.stage == "PRE_IN"){
        this.operateFinal(row.id,"HAD_IN");
      };
      if(row.stage == "PRE_OUT"){
        this.operateDialogVisible = true;
        this.tempRow = row;
      }
    },

    nextOperate(){
      this.operateFinal(this.tempRow.id, this.operateDialog.stage);
    },

    operateFinal(id, stage){
      axios.post("http://127.0.0.1:8080/test/depBill/changeStageDepBill",
        {
          "id" : id,
          "stage" : stage
        }).then(res =>{
        if (res.data.code === 200) {
          this.$message.success("操作成功")
          this.load();
        } else {
          this.$message.error("操作失败")
        }
      });
    },

    delOutBill(billId) {      //删除调拨单
      axios.get("http://127.0.0.1:8080/test/depBill/deleteDepBill/" + billId).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message.success("删除成功")
          this.load();
        } else {
          this.$message.error("删除失败")
        }
      })
    },

    addOutBill() {         // //点击主页面新增按钮后弹出创建新种类对话框函数
      this.createOutDialogVisible = true
      this.createOutDialog = {}
    },

    carDesDialogShow() {            ////新增种类的对话框点击下一步后显示商品表格的函数
      this.addCargoDescriptionDialogVisible = true;
    },

    editAddCarDesShow(index) {  //新增按钮后新增商品表格的编辑函数
      this.editAddChosenIndex = index;
      this.editAddCargoDialogVisible = true;
    },

    addEditCargoDes() {         //新增商品表格编辑按钮后弹出的对话框中的确认函数
      this.createCargoTableData[this.editAddChosenIndex].cargoName = this.createCargoDialog.cargoName;
      this.createCargoTableData[this.editAddChosenIndex].planQuantities = this.createCargoDialog.planQuantities;
      this.createCargoTableData[this.editAddChosenIndex].realQuantities = this.createCargoDialog.realQuantities;
      this.refresh();
      this.editAddCargoDialogVisible = false;
    },

    createCarDialogShow() {     // //新增商品表格中弹出添加商品对话框的函数
      this.createCargoDialogVisible = true;
    },

    addCargoDes() {                 ////新增商品中添加商品对话框中点击确定添加的函数，将商品信息暂存到新增表格
      this.createCargoTableData.push(
        { "cargoName": this.createCargoDialog.cargoName,
          "planQuantities": this.createCargoDialog.planQuantities,
          "realQuantities": this.createCargoDialog.realQuantities,
        });
      this.refresh();
      this.createCargoDialogVisible = false;
    },

    delCreateCargoDes(cargoName) {        //新增商品表格中删除商品的函数
      let data = this.createCargoTableData.find(line => line.cargoName === cargoName);
      this.createCargoTableData.splice(this.createCargoTableData.indexOf(data), 1);
    },

    finish() {                 //将新增种类和该种类中新增的商品表格数据传回后台的函数
      axios.post("http://127.0.0.1:8080/test/depBill/generateDepBill",
        {
          "warehouseName": this.createOutDialog.warehouseName,
          "missionID": this.createOutDialog.missionID,
          "date": this.createOutDialog.date,
          "stage": this.createOutDialog.stage,
          "cargoInf": this.createCargoTableData
        }).then(res=>{
        if (res.data.code === 200) {
          this.$message.success("新增成功")
          this.load();
        } else {
          this.$message.error("新增失败")
        }
      });
      this.addCargoDescriptionDialogVisible = false;
      this.createOutDialogVisible = false;

    },

    chosenOutBillEdit(index,row) {  //点击最外层表格后编辑按钮的函数，弹出编辑框
      this.editOutDialog = JSON.parse(JSON.stringify(row));
      this.editCargoTableData = this.resData.data.list[index].list;
      this.editEditChosenIndex = index;
      this.editOutDialogVisible = true;
    },

    nextEdit(){             ////编辑种类的下一步按钮，进入到编辑商品的表格
      this.editCargoDescriptionDialogVisible = true;
    },

    editEditCarDesShow(index) {  //编辑商品表格中的编辑按钮，打开编辑对话框
      this.editEditChosenIndex = index;
      this.editEditCargoDialogVisible = true;
    },

    editEditCargoDes() {         //编辑编辑对话框中的确认按钮，将编辑的内容暂存表格
      this.editCargoTableData[this.editEditChosenIndex].cargoName = this.createCargoDialog.cargoName;
      this.editCargoTableData[this.editEditChosenIndex].planQuantities = this.createCargoDialog.planQuantities;
      this.editCargoTableData[this.editEditChosenIndex].realQuantities = this.createCargoDialog.realQuantities;
      this.refresh();
      this.editEditCargoDialogVisible = false;
    },

    editCarDialogShow() {        //编辑表格中的新增按钮，弹出编辑表格中的新增对话框
      this.createEditCargoDialogVisible = true;
    },

    createEditCargoDes() {//编辑商品中添加商品对话框中点击确定添加的函数，将商品信息暂存到编辑表格
      this.editCargoTableData.push(
        { "cargoName": this.createCargoDialog.cargoName,
          "planQuantities": this.createCargoDialog.planQuantities,
          "realQuantities": this.createCargoDialog.realQuantities,
        })
      this.refresh();
      this.createCargoDialogVisible = false;
      this.createEditCargoDialogVisible = false;
    },

    delEditCargoDes(cargoName) {        //编辑表格中删除商品按钮
      let data = this.editCargoTableData.find(line => line.cargoName === cargoName);
      this.editCargoTableData.splice(this.editCargoTableData.indexOf(data), 1);
    },

    editCargoDes(){         // //将编辑商品表格中的数据传回后台
      axios.post("http://127.0.0.1:8080/test/depBill/changeDepBill",
        {
          "id": this.editOutDialog.id,
          "warehouseName": this.editOutDialog.warehouseName,
          "stage":this.editOutDialog.stage,
          "missionID":this.editOutDialog.missionID,
          "date":this.editOutDialog.date,
          "cargoInf": this.editCargoTableData
        }).then(res=>{
        if (res.data.code === 200) {
          this.$message.success("编辑成功")
          this.load();
        } else {
          this.$message.error("编辑失败")
        }
        this.editCargoDescriptionDialogVisible = false,
        this.editOutDialogVisible = false
      });

    },

    refresh(){
      this.createCargoDialog.cargoName = "";
      this.createCargoDialog.planQuantities = "";
      this.createCargoDialog.realQuantities = "";
    },


    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
  }
}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>
